import React from 'react';
import { HeaderWrapper, HeaderCon, HeaderC, SearchWrap, HeadInput, Logo } from './style';
import { CSSTransition } from 'react-transition-group';
import { connect } from 'react-redux';
import { actionCreators }  from './store'

const Header = (props) => {
  const { focused, handleFocus, handleBlur } = props;
  return (
    <HeaderWrapper>
      <HeaderCon>
        {/* 属性可以像下面直接设置，也可以在styled组件中设置,如果两处都设置则以使用组件时设置的属性为准 */}
        <Logo href="/"/>
        <HeaderC>
          <ul>
            <li className="focused">
              <a href="/"><span className="iconfont">&#xe786;</span> 首页</a>
            </li>
            <li><a href="/"><span className="iconfont">&#xe697;</span> 下载APP</a></li>
          </ul>
          <SearchWrap>
            <CSSTransition
            in={focused}
            timeout={300} // 动画执行1秒
            classNames="slide"
          >
              {/* 属性可以在组件上设置，也可以在styled中设置 */}
              <HeadInput 
                className = {focused ? "active" : ""}
                onFocus={handleFocus} 
                onBlur={handleBlur}/>
            </CSSTransition>
            <span className = {focused ? "iconfont active" : "iconfont"}>&#xe62e;</span>
          </SearchWrap>
        </HeaderC>
        <ul>
          <li><a href="/"><span className="iconfont">&#xe636;</span></a></li>
          <li><a href="/">登录</a></li>
          <li><a className="btn" href="/">注册</a></li>
          <li><a className="btn bg" href="/"><span className="iconfont">&#xe66f;</span> 写文章</a></li>
        </ul>
      </HeaderCon>
    </HeaderWrapper>
  )
}

const mapStateToProps = (state) => {
  return {
    // focused: state.get('header').get('focused')
    // 使用immutable的getIn方法连写，效果同上
    focused: state.getIn(['header', 'focused'])
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleFocus () {
      dispatch(actionCreators.searchFocus());
    },
    handleBlur () {
      dispatch(actionCreators.searchBlur());
    }
  }
}

// export default Header;
export default connect(mapStateToProps, mapDispatchToProps)(Header);